<template>
<!-- 添加XXXXX区域 -->
<el-dialog title="添加XXXXX" :visible.sync="addDialogVisible" width="50%">
            <el-form :model="addXxxxxForm" :rules="addXxxxxFormRules" ref="addXxxxxFormRef">
                <el-row>
                    <el-col style="width: 120px;">
                        <el-form-item label="字段中文1：" prop="字段英文1"
                            style="width: 120px;display:inline-block;"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="addXxxxxForm.字段英文1" placeholder="请输入字段中文1：" style="width: 150px;"></el-input>
                    </el-col>
                    <el-col style="width: 120px;">
                        <el-form-item label="字段中文2：:" style="display:inline-block" prop="字段英文2"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="addXxxxxForm.字段英文2" placeholder="请输入字段中文2：" style="width: 150px;"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col style="width: 110px;height: 40px;">
                        <el-form-item label="字段中文3：:" style="display:inline-block;" prop="字段英文3"></el-form-item>
                    </el-col>
                    <el-col style="width: 200px;height: 40px;margin-left: 10px;">
                        <el-input type="textarea" placeholder="请输入" v-model.trim="addXxxxxForm.字段英文3"
                            :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100" show-word-limit />
                    </el-col>
                </el-row>
            </el-form>
            <div class="row-container">
                <el-row>
                    <el-col style="width: 100px;">
                        <!-- 取消即关闭窗口 -->
                        <el-button @click="addClose()">取消</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="primary" @click="addXxxxx()">确定</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="info" @click="addXxxxxClear()">重置</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
</template>
<script>
export default {
    data(){
        addDialogVisible: false,//对话框默认关闭状态

        
        // 添加XXXXX的数据
        addXxxxxForm: {
                '',//字段中文1
                字段英文2: '',//字段中文2
                字段英文3: '',//字段中文3
                字段英文4: '',//字段中文4
                字段英文5: '',//字段中文5
            },
        
        //添加XXXXX字段验证
        addXxxxxFormRules: {
                字段英文1: [
                    { required: true, message: '请输入字段中文1', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                字段英文2: [
                    { required: true, message: '请输入字段中文2', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
            },
    },
    methods:{
        //新增XXXXX
        addXxxxx() {
            this.$refs.addXxxxxFormRef.validate(async valid => {
                if (!valid) return;
                const { data: res } = await this.$http.post("addXxxxx", this.addXxxxxForm);
                if (res.message != '成功') {
                    return this.$message.error("新增失败！！！");
                }
                this.$message.success("新增成功！！！");
                this.addDialogVisible = false;
                this.getXxxxxData();
            });
        },
        //addXxxxxClear()方法，当鼠标放在输入框中，清空输入框内容,通过@blur去触发---新增部门信息重置
        addXxxxxClear() {
            this.addXxxxxForm.字段英文1 = '';
            this.addXxxxxForm.字段英文2 = '';
            this.addXxxxxForm.字段英文3 = '';
        },
        addClose() {
            //清空表单方法
            this.title = '新增窗体'
            this.addDialogVisible = false;
            this.addXxxxxForm = {
                字段英文1: '',//字段中文1
                字段英文2: '',//字段中文2
                字段英文3: '',//字段中文3
                字段英文4: '',//字段中文4
                字段英文5: '',//字段中文5
            };
        },
    }
}
</script>
<style>

</style>